<div class="ui-widget" >
	<?php
		if($this->tests):
			?>
				<div >
					<a style="padding:10px;margin-left: 10px"  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  href="<?php echo $this->url(array('ctrl' => 'tests','act' => 'csv'));?>" >Export CSV</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a style="padding:10px;margin-left: 10px"  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  href="<?php echo $this->url(array('ctrl' => 'tests','act' => 'xml'));?>" >Export XML</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a id="addTest" style="padding:10px;margin-left: 10px"  class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"  href="<?php echo $this->url(array('ctrl' => 'tests','act' => 'add'));?>" >Add Test</a>&nbsp;&nbsp;&nbsp;&nbsp;
				</div><br />
				<div id="testsTable" ><?php $this->partial('table');?></div>
			<?php
		endif; 
	?>
</div>
<div id="testFormDialog" style="display: none;" ></div>
<div id="dialogConfirm" title="<?php echo $this->escape($this->confirmTitle);?>" style="display: none;" >
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><?php echo $this->escape($this->confirmMessage);?></p>
</div>
<script type="text/javascript">

	function loadFormAndRefreshList(element, $testFormDialog, dialogTitle){
		$.ajax({
			url: element.href,
			success: function(htmlFromServer){
				//jquery html is equal to innerHTML js native
				$testFormDialog.html(htmlFromServer);
				$testFormDialog.dialog("option", "title", dialogTitle);
				$testFormDialog.dialog('open');
				//find the form element in the $testFormDialog div
				var $form = $('form', $testFormDialog);
				$form.submit(function(){
					$.ajax({
						dataType: 'json',
						type: this.method,
						url: this.action,
						//Encode a set of form elements as a string for submission.
						data: $(this).serialize(),
						success: function(dataFromServer){
							if(dataFromServer){
								if(dataFromServer.errorMessage){
									$('#errorMessageDiv').remove();
									var html = '<div id="errorMessageDiv" style="padding: 0 .7em;" class="ui-state-error ui-corner-all">';
										html += '<p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span>'; 
										html += '<strong>Alert:</strong> '+dataFromServer.errorMessage+'.</p></div>';
									$form.before(html);
								}else if(dataFromServer.testAdded){
									$.ajax({
										url: "<?php echo $this->url(array('ctrl' => $this->controllerName,'act' => 'table'));?>",
										success: function(htmlFromServer){
											$('#testsTable').html(htmlFromServer);
											$testFormDialog.dialog('close');
										}
									});
								}
							}
						}
					});
					return false;
				});
			}
		});
	}

	$(function(){
		var $testFormDialog = $('#testFormDialog');
		$testFormDialog.dialog({
			width:520,
			modal: true,
			autoOpen: false
		});
		$('#addTest').click(function(){
			loadFormAndRefreshList(this, $testFormDialog, 'Add Test');
			return false;
		});
	});
</script>